<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>首页教师展示列表</title>
	<style type="text/css">
		body,html{
			position: relative;
			font-family: '微软雅黑';
			background: #f9f9f9;
		}
		.index-header{
			width: 100%;
			height: 50px;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #f95618;
			overflow: hidden;
			z-index: 99;
		}
		.index-header-search{
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.mui-input-row::before{
			margin-top: -10px;
		}
		.index-header-search .mui-input-row{
			width: 95%;
		}
		.index-header-search .mui-input-row input{
			margin-bottom: 0;
			background: white;
			border: 1px solid #dcdcdc;
		}

		.mui-content{
			background: #f9f9f9;
		}
		.index-choose-row{
			position: relative;
			background: white;
			padding: 5px 0;
			z-index: 99;
			border-bottom: 1px solid #c1c1c1;
		}

		.index-choose-row .mui-col-xs-6{
			border-right: 1px solid #c1c1c1;
		}
		.index-choose-row .mui-col-xs-6:nth-last-child(1){
			border-right: 0;
		}
		.index-choose-row .mui-col-xs-6 li{
			list-style: none;
			line-height: 30px;
			padding: 0;
			text-align: center;
			font-size: 1.4rem;
		}
		.index-choose-row .mui-col-xs-6 li i.mui-icon{
			font-size: 1.6rem;
		}


		.index-teacher-lists{
			position: relative;
			width: 100%;
			padding: 10px;
			background: #f9f9f9;
			z-index:1;
		}
		.index-teacher-lists a,.index-teacher-lists a:hover,.index-teacher-lists a:focus,.index-teacher-lists a:link,.index-teacher-lists a:visited{
			text-decoration: none;
		}
		.index-teacher-info{
			position: relative;
			border:1px solid #ebeaea;
			border-radius: 5px;
			background: white;
			box-shadow: 1px 1px 15px #ebeaea;
			-webkit-box-shadow: 1px 1px 15px #ebeaea;
   			-moz-box-shadow: 1px 1px 15px #ebeaea;
   			margin-bottom: 10px;
		}
		.index-teacher-header{
			position: relative;
			width: 100%;
			padding: 10px;
			border-bottom: 1px solid #999999;
		}
		.index-teacher-header img{
			position: absolute;
			top: 10px;
			left: 10px;
			width: 90px;
			height: 90px;
			border-radius: 50%;
		}
		.index-teacher-header .index-teacher-text{
			position: relative;
			padding-left:105px;
			height: 90px;
		}
		.index-teacher-header .index-teacher-text p{
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.index-teacher-name{
			font-size: 2rem;
			line-height: 30px;
			color: #393500;
		}
		.index-teacher-name span{
			font-size: 1.4rem;
			margin-left: 10px;
			color: #999999;
		}
		.index-teacher-money{
			line-height: 25px;
			color: #333333;
			font-size: 1.4rem;
		}
		.index-teacher-money span{
			display: inline-block;
			margin-right: 8px;
			font-size: 1.4rem;
		}
		.index-teacher-money span::before{
			font-size: 1.3rem;
			color: #777;
			margin-right: 3px;
		}
		.index-teacher-money span:nth-last-child(1){
			margin-right:0px;
		}
		.index-teacher-area{
			color: #393500;
			line-height: 30px;
			font-size: 1.4rem;
		}

		.index-teacher-contro{
			padding: 10px;
			color: #333333;
			text-indent: 2rem;
			font-size: 1.3rem;
			line-height: 22px;
			font-family: '宋体','微软雅黑';
		}
		.index-teacher-contro p{
			display: -webkit-box;
			width: 100%;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp:2;
		}
		.mui-pull-bottom-pocket.mui-block.mui-visibility{
			z-index: 9999;
		}
		.choosekbox{
			position: absolute;
			top: 41px;
			width: 100%;
			z-index: 999;
			background: white;
			background: rgba(0,0,0,.3);
			display: none;
		}
		.choosekbox ul li{
			list-style: none;
			line-height: 35px;
			font-size: 1.4rem;
			border-bottom: 1px solid #c1c1c1;
			padding: 0 10px;
			color: #666666;
		}
		.fa-check{
			color: #f95618;
		}
		.fa-check::before{
			content: '';
		}
		.fa-check::after{
			content: "\f00c";
			margin-left: 5px;
		}
		.wordsbox{
			padding: 0px 10px 10px;
		}
		.wordsbox p{
			line-height:30px;
		}
		.choosekbox p.index-cat{
			font-size: 1.4rem;
			color: #666666;
		}
		.choosekbox p.index-cat-lists span{
			display: inline-block;
			font-size: 1rem;
			padding:8px 10px;
			margin-right: 5px;
			margin-bottom: 5px;
			border-radius: 5px;
			border:1px solid #c4c0b5;
			line-height: 10px;
		}
		.index-btnsure{
			height: 30px;
			width: 100%;
			position: relative;
			border-top: 1px solid #c1c1c1;
		}
		.index-btnsure button{
			width: 50%;
			border:0;
			float: left;
			box-sizing: border-box;
			border-right: 1px solid #c1c1c1;
			height: 30px;
			border-radius: 0;
		}
		.btn-sure{
			background: #f95618;
			color: white;
		}
		.choosekbox p.index-cat-lists span.span-highlight{
			border:1px solid #f95618;
			background: #f95618;
			color: white;
		}
		.lion{
			color: #f95618;
		}
		.my_loading{
			position: relative;
			margin-top: 130px;
			display: none;
		}
		.my_loading i{
			position: absolute;
			display: inline-block;
			font-size:6rem;
			margin:auto;
			left: 50%;
			margin-left: -35px;
		}
		.my_loading p{
			text-align: center;
			padding-top:100px;
			font-size: 1.5rem;
		}
		.index-teacher-sex{
			position: absolute;
			left:88px;
			top:20px;
			font-size:1.6rem;
		}
	</style>
</head>
<body>
	<div class="index-header">
		<div class="index-header-search">
			<div class="mui-input-row mui-search">
			    <input type="search" class="mui-input-clear" placeholder="搜索老师">
			</div>
		</div>
	</div>

	<div class="mui-content" id="content">
	    <div class="mui-row index-choose-row">
	        <div class="mui-col-sm-6 mui-col-xs-6 myli">
	            <li class="mui-table-view-cell nav-recommend">
	                推荐 <i class="mui-icon mui-icon-arrowdown"></i>
	            </li>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 myli">
	            <li class="mui-table-view-cell nav-require">
	                要求 <i class="mui-icon mui-icon-arrowdown"></i>
	            </li>
	        </div>
	        <div class="choosekbox recommendbox">
            	<ul style="background: white;">
            		<li><span class="fa fa-check">最快</span></li>
            		<li><span class="fa">最近</span></li>
            	</ul>
            </div>
            <div class="choosekbox requirebox">
            	<div style="background: white;">
	            	<div class="wordsbox">
	            		<p class="index-cat">年级</p>
	            		<p class="index-cat-lists index-cat-year"><span class="span-highlight">全部</span><span>小学</span><span>初中</span><span>高中</span></p>
	            		<p class="index-cat">学科</p>
	            		<p class="index-cat-lists index-cat-cats"><span class="span-highlight">全部</span><span>语文</span><span>数学</span><span>英语</span><span>物理</span><span>化学</span><span>生物</span><span>政治</span><span>历史</span><span>地理</span></p>
	            		<p class="index-cat">教学经验</p>
	            		<p class="index-cat-lists index-cat-exp"><span class="span-highlight">全部</span><span>1年以内</span><span>1-5年</span><span>5-10年</span><span>10年以上</span></p>
	            	</div>
	            	<div class="index-btnsure">
	            		<button class="btn-reset">重置</button>
	            		<button class="btn-sure">确定</button>
	            	</div>
	            </div>
            </div>
	    </div>


	    <div class="index-teacher-lists" id="indexlists">
	    	<div class="mui-scroll" id="mui-scroll" style="position: relative;">
		    	<a href="http://www.baidu.com">
			    	<div class="index-teacher-info">
			    		<div class="index-teacher-header">
			    			<img src="images/head.jpg">
			    			<span class="index-teacher-sex fa fa-mars"></span>
			    			<!-- 性别图标 fa-mars fa-venus-->
			    			<div class="index-teacher-text">
			    				<p class="index-teacher-name">李老师<span>36岁</span></p>
			    				<p class="index-teacher-money"><span class="fa fa-shopping-bag">10年</span><span  class="fa fa-graduation-cap">博士</span><span  class="fa fa-cny">100-300/时</span></p>
			    				<p class="index-teacher-area">高中数学老师</p>
			    			</div>
			    		</div>
			    		<div class="index-teacher-contro">
			    			<p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p>
			    		</div>
			    	</div>
		    	</a>
	    	</div>
	    </div>
		<div class="my_loading">
			<i class="fa fa-spinner fa-pulse"></i>
			<p>正在加载数据...</p>
	    </div>
	</div>

	
	<!-- 共用底部 -->
	<div style="height: 50px;"></div>
	<div class="main_nav_bottom">
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container nav-container" align="center">
                <ul class="nav nav-tabs nav-tabs-justified">
                    <div class="row mynavs-row" align="center">
                        <div class="col-md-3 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#" class="lighthigh">
	                        		<span class="glyphicon glyphicon-home bsnav-icon"></span>
	                        		<span class="bsnav-words">首页</span>
	                        	</a>
                        	</li>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#">
	                        		<span class="glyphicon glyphicon-th bsnav-icon"></span>
	                        		<span class="bsnav-words">牛津堂</span>
	                        	</a>
                        	</li>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4" align="center">
                        	<li>
	                        	<a href="#">
	                        		<span class="glyphicon glyphicon-user bsnav-icon"></span>
	                        		<span class="bsnav-words">我的</span>
	                        	</a>
                        	</li>
                        </div>
                    </div>
                </ul>
            </div>
        </nav>
    </div>

</body>
<script type="text/javascript" src="./mui/js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
 
	
$(document).ready(function(){
	var boxs = document.getElementsByClassName('choosekbox');
	for (var i = 0; i < boxs.length; i++) {
		boxs[i].style.height = window.innerHeight+'px';
	}
	document.getElementById('indexlists').style.height = window.screen.availHeight -50+'px';	
	pulluptoRefresmui();
	
	    $(".myli").on('tap',function(){
	        var _index = $(this).index();
	        $(".choosekbox").hide();
	        $(".choosekbox").eq(_index).show();
	        $('body').css('overflow','hidden'); /*展示时固定body*/
	        $(".myli").find("li").removeClass("lion");
	    	$(this).find("li").addClass("lion");
	    });
	});

	/*快速选择按钮*/
	$('.choosekbox ul li').on('tap',function(){
		$(this).find('span').addClass('fa-check');
		$(this).siblings().find('span').removeClass('fa-check');
		loadCommon();
		$('body').css('overflow','auto'); /*隐藏时释放body*/
		$('.recommendbox').fadeOut();/*选择后隐藏*/

	})

	/*关键词高亮*/
	$('.index-cat-lists span').on('tap',function(){
		$(this).addClass('span-highlight').siblings().removeClass('span-highlight');
	})

	/*确定按钮获取内容*/
	$('.btn-sure').on('tap',function(){
		var myyear = $('.index-cat-year').find('.span-highlight').html();
		var cats = $('.index-cat-cats').find('.span-highlight').html();
		var exp = $('.index-cat-exp').find('.span-highlight').html();
		console.log(myyear,cats,exp);
		loadCommon();
		$('body').css('overflow','auto'); /*隐藏时释放body*/
		$('.requirebox').hide();/*确定后隐藏*/
	})

	/*重置按钮重置选项*/
	$('.btn-reset').on('tap',function(){
		$('.index-cat-year').find('span:nth-child(1)').addClass('span-highlight').siblings().removeClass('span-highlight');;
		$('.index-cat-cats').find('span:nth-child(1)').addClass('span-highlight').siblings().removeClass('span-highlight');;
		$('.index-cat-exp').find('span:nth-child(1)').addClass('span-highlight').siblings().removeClass('span-highlight');;
	})

	function loadCommon(){
		$('.my_loading').show();
		$('.index-teacher-lists').hide();
		setTimeout(function(){
			$('.my_loading').hide();
			$('.index-teacher-lists').show();
		},1000)
	}
	function pulluptoRefresmui() {
		mui.init({
			pullRefresh: {
				container: '#indexlists',
				up: {
					height: 50, 
					callback: pullupRefresh,
					// contentrefresh: '正在刷新...',
					auto: false
				}
			}
		});

		function pullupRefresh() {
			setTimeout(function() {
				mui('#indexlists').pullRefresh().endPullupToRefresh();
				method();
			}, 1000);
		}
	}
	var num = 1;

	function method(){
		
		if(num < 3){

			var myStr = '<a href="http://www.baidu.com"><div class="index-teacher-info"><div class="index-teacher-header"><img src="images/head.jpg"><span class="index-teacher-sex fa fa-venus"></span><div class="index-teacher-text"><p class="index-teacher-name">李老师<span>36岁</span></p><p class="index-teacher-money"><span class="fa fa-shopping-bag">10年</span><span  class="fa fa-graduation-cap">博士</span><span  class="fa fa-cny">100-300/时</span></p><p class="index-teacher-area">高中数学老师</p></div></div><div class="index-teacher-contro"><p>善于归纳知识系统、题型分类并在总结出相应解题思路，启发学生思维</p></div></div></a>';

			$('.mui-scroll').append(myStr);

		}else{
			mui.toast("没有更多数据了");
		}
		 
		num++;
	}

		$('.mui-scroll').on('tap','a',function(){
			window.location.href=$(this).attr("href");
		})


	

</script>
</html>